 <template>
  <!-- 路由视图：配置的路由组件会在这里进行显示 -->
  <!-- 用于渲染匹配到的组件。 -->
  <div>
    <transition name="fade">
      <keep-alive>
        <router-view v-if="$route.meta.o"> </router-view>
      </keep-alive>
    </transition>
    <router-view v-if="!$route.meta.o"> </router-view>
  </div>
</template>
 <script>
export default {
  data() { 
    return {};
  },
  methods: {},
  computed: {},
};
</script>
 <style lang='css' >
/*scoped 样式不会被共享只在当前组件有效*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>